import {
    Platform,
    Text,
    Image,
    FlatList,
    TouchableOpacity,
    View,
    Button,
    Picker
} from 'react-native';
import React, { Component } from 'react';
import ScrollableTabView, { ScrollableTabBar, DefaultTabBar } from 'react-native-scrollable-tab-view';
import { BaseComponent, NavBar, TableList, PlaceHolderView } from '../wedgets';
import Fetch from '../lib/FetchUtil/Fetch';
import Follow from './Follow';
import styles from './css/Follow';
import { isIphoneX } from 'react-native-iphone-x-helper';

export default class GhostStoriesPage extends BaseComponent {
    constructor(props) {
        super(props);
    }
    static navigationOptions = ({ navigation }) => ({
        header: <NavBar
            title='鬼故事'
            navigation={navigation}
            enableBackBtn={true}
            backColor={'#fff'}
            titleColor={'#fff'}
            showRightItem={true}
            rightItem={() =>
                <View style={{ marginTop: IS_X ? 54 : 26, fontSize: 16, fontWeight: 'bold' }}>
                    <Button title={(navigation.state.params&&navigation.state.params.selectItem)?navigation.state.params.selectItem.text:'短篇'} color='#fff' onPress={() => navigation.state.params.navigateRightPress()}></Button>
                </View>} />
    })
    render() {
        const { navigation } = this.props ;
        console.log('====+',this.props.navigation);
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <SelectTypeView ref="seleceView" navigation={navigation}>
                </SelectTypeView >
            </View>
        );
    }

    componentDidMount(){
        this.props.navigation.setParams({ navigateRightPress:this._showSelectView })
    }

    _showSelectView() {
        //修改标题
        // button.title = 'aaaa'
    }
}

class GhostStoriesPageView extends BaseComponent {
    render() {
        return (
            <View>
                <Text>aaa</Text>
            </View>
        )
    }
}

class SelectTypeView extends Component {
    static defaultProps = {
      navigation:{}
    }
    constructor(props) {
        super(props);
        this.state = {
            selectType: 'cp',
            selectItem: {}
        }

    }
    render() {
        const array = [
            { 'type': 'dp', 'text': '短篇' },
            { 'type': 'cp', 'text': '长篇' },
            { 'type': 'xy', 'text': '校园' },
            { 'type': 'yy', 'text': '医院' },
            { 'type': 'jl', 'text': '家里' },
            { 'type': 'mj', 'text': '民间' },
            { 'type': 'ly', 'text': '灵异' },
            { 'type': 'mj', 'text': '民间' },
            { 'type': 'yc', 'text': '原创' },
            { 'type': 'neihanguigushi', 'text': '内涵' }]
        const listItems = array.map((item) =>
            <Picker.Item label={item.text} value={item.type} key={item.type}
            />
        )
        const { navigation } = this.props;
        return (
            <Picker
                selectedValue={this.state.selectType}
                style={{ height: 50, width: 100 }}
                onValueChange={this.selectChange.bind(this,array,navigation)}>
                {listItems}
            </Picker>
        )
    }
    selectChange=(array,navigation,itemValue, index) => {
      this.setState({ selectType: itemValue, selectItem: array[index] });
      this.props.navigation.setParams({
        selectItem: array[index]
      })
  }
}

// onValueChange={(itemValue, itemIndex) => this.selectChange.bind(this,itemValue, array[itemIndex])}>
